<template>
    <div class="verified">
      <template v-if="userType == 1">
        <div class="item">
          <div class="sfz">
            <div v-if="!userInfo.card_face">
              <span>+</span>
              <Qiniu  className="card_face" isShort="true" @upload="upload" prop="card_face"></Qiniu>
            </div>
            <div v-else>
              <img :src="userInfo.card_face_img" alt="">
              <i class="iconfont icon-x" @click="handleCard('user')"></i>
            </div>
            <p>上传身份证正面</p>
          </div>
          <div class="inputs">
            <div class="input-item">
              <label>姓名</label>
              <input type="text" name="name" disabled v-model="userInfo.name"  placeholder="自动识别"/>
            </div>
            <div class="input-item">
              <label>身份证号码</label>
              <input type="text" name="id_number" disabled v-model="userInfo.id_number" placeholder="自动识别"/>
            </div>
            <div class="input-item">
              <label>性别</label>
              <input type="text" name="sex" disabled :value="userInfo.sex | handleSex" placeholder="自动识别"/>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="sfz">
            <div v-if="!userInfo.card_back">
              <span>+</span>
              <Qiniu is-url="true" className="card_back"  isShort="true" @upload="upload" prop="card_back"></Qiniu>
            </div>
            <div v-else>
              <img :src="userInfo.card_back_img" alt="">
              <i class="iconfont icon-x" @click="userInfo.card_back=''"></i>
            </div>
            <p>上传身份证反面</p>
          </div>
        </div>
      </template>
      <template v-if="userType == 2">
        <div class="item">
          <div class="sfz">
            <div v-if="!enterpriseInfo.card_face">
              <span>+</span>
              <Qiniu is-url="true"  className="card_face"  isShort="true" @upload="upload" prop="card_face"></Qiniu>
            </div>
            <div v-else>
              <img :src="enterpriseInfo.card_face_img" alt="">
              <i class="iconfont icon-x" @click="handleCard()"></i>
            </div>
            <p>上传身份证正面</p>
          </div>
          <div class="inputs">
            <div class="input-item">
              <label>姓名</label>
              <input type="text" name="card_name" disabled v-model="enterpriseInfo.card_name"  placeholder="自动识别"/>
            </div>
            <div class="input-item">
              <label>身份证号码</label>
              <input type="text" name="id_number" disabled v-model="enterpriseInfo.id_number" placeholder="自动识别"/>
            </div>
            <div class="input-item">
              <label>性别</label>
              <input type="text" name="sex" disabled :value="enterpriseInfo.sex | handleSex" placeholder="自动识别"/>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="sfz">
            <div v-if="!enterpriseInfo.card_back">
              <span>+</span>
              <Qiniu is-url="true" className="card_back"  isShort="true" @upload="upload" prop="card_back"></Qiniu>
            </div>
            <div v-else>
              <img :src="enterpriseInfo.card_back_img" alt="">
              <i class="iconfont icon-x" @click="enterpriseInfo.card_back=''"></i>
            </div>
            <p>上传身份证反面</p>
          </div>
        </div>
        <div class="item">
          <div class="sfz">
            <div v-if="!enterpriseInfo.business_license">
              <span>+</span>
              <Qiniu is-url="true" className="business_license" isShort="true" @upload="upload" prop="business_license"></Qiniu>
            </div>
            <div v-else>
              <img :src="enterpriseInfo.business_license_img" alt="">
              <i class="iconfont icon-x" @click="enterpriseInfo.business_license=''"></i>
            </div>
            <p>上传营业执照</p>
          </div>
        </div>
      </template>
      <button :class="{'es': isSubmit}" :disabled="!isSubmit" @click="submitUserInfo">下一步</button>
    </div>
</template>

<script>
  import Qiniu from './../common/Qiniu'
  import CONFIG from './../../config'
  import { Toast } from 'mint-ui';

  export default {
    name: "Verified",
    data(){
      return {
        isSuccess:false,
        userType:CONFIG.userType,
        value:'',
        userInfo:{
          card_face:'',
          card_back:'',
          name:'',
          sex:'',
          id_number:''
        },
        enterpriseInfo:{
          business_license:'',
          card_face:'',
          card_back:'',
          card_name:'',
          sex:'',
          id_number:''
        },
        isRequest:false
      }
    },
    components:{
      Qiniu,
    },
    computed:{
      isSubmit(){
        if(this.userType == 1){
          return this.userInfo.card_face.trim() && this.userInfo.card_back.trim()
        }else {
          return this.enterpriseInfo.card_face.trim() && this.enterpriseInfo.card_back.trim()  && this.enterpriseInfo.business_license.trim()
        }
      }
    },
    methods:{
      handleCard(value){
        if(value ==='user'){
          this.userInfo.card_face = '';
          this.userInfo.name = '';
          this.userInfo.sex = '';
          this.userInfo.id_number = '';
        }else {
          this.enterpriseInfo.card_face = '';
          this.enterpriseInfo.name = '';
          this.enterpriseInfo.sex = '';
          this.enterpriseInfo.id_number = '';
        }
      },
      upload(value,prop,fileName){
        if(this.userType ==1){
          this.userInfo[prop] = fileName;
          this.userInfo[prop+'_img'] = value;
          if(prop === 'card_face'){
            this.$api.getImageInfo({card_face:value}).then((res)=>{
              this.userInfo = Object.assign({},this.userInfo,res.data);
            }).catch((err)=>{
              this.userInfo[prop] = '';
              Toast(err.response.data.msg);
            })
          }
        }else if(this.userType == 2){
          this.enterpriseInfo[prop] = fileName;
          this.enterpriseInfo[prop+'_img'] = value;
          if(prop === 'card_face'){
            this.$api.getImageInfo({card_face:value}).then((res)=>{
              this.enterpriseInfo.card_name = res.data.name;
              this.enterpriseInfo.id_number = res.data.id_number;
              this.enterpriseInfo.sex = res.data.sex;
            }).catch((err)=>{
              this.enterpriseInfo[prop] = '';
              Toast(err.response.data.msg);
            })
          }
        }
      },
      submitUserInfo(){
        if(!this.isRequest){
          this.isRequest = true;
          if(this.userType == 1){
            this.submit('userIdCard',this.userInfo);
          }else if(this.userType == 2){
            this.submit('enterpriseIdCard',this.enterpriseInfo);
          }
        }
      },
      submit(methodName,obj){
        this.$api[methodName](obj).then((res)=>{
          this.isRequest = false;
          this.isSuccess = true;
          location.href = res.data.token;
        }).catch((err)=>{
          this.isRequest = false;
          Toast(err.response.data.msg);
        })
      }
    },
    filters:{
      handleSex(value){
        if(value==1){
          return '男'
        }else if(value==2){
          return '女'
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.verified{
  width: 100%;
  .item{
    background: #fff;
    margin: 0 0 20px 0;
    .sfz{
      padding: 94px 0 0.1px 0;
      >div{
        width:460px;
        min-height:260px;
        background:rgba(245,245,245,1);
        border-radius:2px;
        margin: 0 auto;
        position: relative;
        span{
          width:110px;
          height:110px;
          background:rgba(255,255,255,1);
          border-radius:50%;
          font-size: 60px;
          text-align: center;
          color:#E71F18;
          line-height: 110px;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%);
        }
        img{
          width: 100%;
        }
        .iconfont{
          font-size: 30px;
          line-height: 30px;
          background: #fff;
          color: #000;
          position: absolute;
          right: 0;
          top: 0;
          cursor: pointer;
        }
      }
      p{
        font-size:30px;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height:30px;
        margin: 30px 0;
        text-align: center;
      }
    }
    .inputs{
      padding: 0 30px;
    }
  }
  button{
    width:690px;
    height:88px;
    border-radius:6px;
    font-size:36px;
    font-weight:400;
    color:rgba(255,255,255,1);
    margin: 30px auto;
    display: block;
    &.es{
      background:rgba(231,31,24,1);
    }
  }
  /deep/ .qiniu{
    width: 100%;
    height: 260px;
    position: relative;
    z-index: 2;
  }
  /deep/ .qiniu label{
    width: 100%;
    height: 100%;
    font-size: 0;
    background: transparent;
  }
}
</style>
